<template>
  <scroll-view class="layout" scroll-y="true">
    <view class="header">
      <view class="title center">
        {{ title }}
      </view>
    </view>
    <view class="tips center">
      <view class="clock center" style="margin-right: 10rpx">
        <img
          style="width: 100%; height: 100%"
          src="../../static/invite/clock.png"
          alt=""
        />
      </view>
      {{ tips }}
    </view>
    <view class="">
      <view class="center moudule">
        <view class="module_buju" style="">
          <view class="small_logo center" style="margin-right: 18rpx">
            <img class="tubiao" :src="adventage[0].url" alt="" />
          </view>
          <view class="" style="width: 500rpx">
            <view class="moudule_title">
              {{ adventage[0].title }}
            </view>
            <view class="moudule_content">
              {{ adventage[0].content }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="">
      <view class="center moudule">
        <view class="module_buju" style="">
          <view class="small_logo center" style="margin-right: 18rpx">
            <img
              class=""
              :src="adventage[1].url"
              alt=""
              style="width: 70rpx; height: 70rpx"
            />
          </view>
          <view class="" style="width: 500rpx">
            <view class="moudule_title">
              {{ adventage[1].title }}
            </view>
            <view class="moudule_content">
              {{ adventage[1].content }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="">
      <view class="center moudule">
        <view class="module_buju" style="">
          <view class="small_logo center" style="margin-right: 18rpx">
            <img
              class=""
              :src="adventage[2].url"
              alt=""
              style="width: 50rpx; height: 50rpx"
            />
          </view>
          <view class="" style="width: 500rpx">
            <view class="moudule_title">
              {{ adventage[2].title }}
            </view>
            <view class="moudule_content">
              {{ adventage[2].content }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="">
      <view class="center moudule">
        <view class="module_buju" style="">
          <view class="small_logo center" style="margin-right: 18rpx">
            <img
              class=""
              :src="adventage[3].url"
              alt=""
              style="width: 70rpx; height: 70rpx"
            />
          </view>
          <view class="" style="width: 500rpx">
            <view class="moudule_title">
              {{ adventage[3].title }}
            </view>
            <view class="moudule_content">
              {{ adventage[3].content }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="center" style="margin-bottom: 62rpx">
      <button open-type="contact" class="ruzhu center">立即入驻</button>
    </view>
    <view class="center small_title"> 入驻流程 </view>
    <view class="center small_content" style="margin-bottom: 46rpx">
      立即入驻-人工客服-回复
      <view class="" style="color: rgba(110, 88, 170, 1)"> 【入驻】 </view>
    </view>
    <view class="center small_title"> 联系我们 </view>
    <view class="center small_content">
      <view class="under_logo">
        <img class="under_logo" src="../../static/invite/phone.png" alt="" />
      </view>
      <view class="" style="margin-left: 20rpx">
        {{ phone_number }}
      </view>
    </view>
    <view class="center small_content">
      <view class="under_logo">
        <img class="under_logo" src="../../static/invite/email.png" alt="" />
      </view>
      <view class="" style="margin-left: 20rpx">
        {{ email }}
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      title: "欢迎全国各地铁馆、商业健身房等各类健身场所入驻本应用！",
      tips: "2025年4月31日前入驻即可享受以下权益：",
      adventage: [
        {
          url: "../../static/invite/1.png",
          title: "免费会员名额",
          content: "50-200个会员兑换码，店内办卡用户均可免费激活会员",
        },
        {
          url: "../../static/invite/2.png",
          title: "专业器材配件",
          content: "杠铃专用手机支架2-10个",
        },
        {
          url: "../../static/invite/3.png",
          title: "宣传物料",
          content: "精美设计的健身房视角宣传海报（A3尺寸），助力推广",
        },
        {
          url: "../../static/invite/4.png",
          title: "全方位推广",
          content: "自媒体、官方公众号、小程序内宣传展示",
        },
      ],

      phone_number: "17722862475",
      email: "tjthtech@163.com",
    };
  },
  methods: {
    go_ruzhu() {
      const pages = getCurrentPages(); // 获取当前页面栈
      const firstPage = pages[0]; // 获取栈中的第一个页面（最底部页面）
      const delta = pages.length - 1; // 计算需要返回的页面数

      console.log("当前页面栈的页面数:", pages.length);
      console.log("返回到页面:", firstPage.route);

      // 返回到页面栈最底部的页面
      uni.navigateBack({
        delta: delta, // 返回的页面数，delta = 页面栈的长度 - 1
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layout {
  font-family: "优设标题黑";
  padding: 0rpx;
  margin: 0rpx;
  background: rgba(110, 88, 170, 0.02);
}
.module_buju {
  display: flex;
  align-items: center; /* 让子元素竖直居中对齐 */

  width: 580rpx;
}
.clock {
  height: 26rpx;
  width: 26rpx;
}
.under_logo {
  width: 40rpx;
  height: 40rpx;
  background-color: transparent; /* 确保背景透明 */
}
.header {
  width: 100%;
  height: 100%;
  background-image: url("http://182.92.108.71:9001/image/mrchantSettleIn.png");
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-position: center; /* 背景图片居中 */
  margin: 0rpx;
}
.small_title {
  /** 文本1 */
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(0, 0, 0, 1);
}
.small_content {
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 36rpx;
  color: rgba(128, 128, 128, 1);
}
.small_logo {
  width: 90rpx;
  height: 90rpx;
  background-color: rgba(110, 88, 170, 0.2); /* 紫色背景 */
  border-radius: 50%; /* 使其成为圆形 */
  display: flex;
  justify-content: center;
  align-items: center; /* 如果你有内容在里面，可以居中对齐 */
}

.tubiao {
  width: 60rpx;
  height: 60rpx;
}
.moudule_title {
  font-size: 32rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 42rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
}
.moudule_content {
  /** 文本1 */
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 38rpx;
  color: rgba(124, 124, 126, 1);
  text-align: left;
}
.text {
  font-size: 48rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 80.06rpx;
  font-family: "优设标题黑";
}
.ruzhu {
  width: 540rpx;
  height: 96rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(110, 88, 170, 1);
  // 文本
  font-size: 40rpx;
  font-weight: 400;
  line-height: 52rpx;
  color: rgba(255, 255, 255, 1);
}
.moudule {
  width: 636rpx;
  height: 144rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 2px rgba(110, 88, 170, 0.2);
  margin: 28rpx auto;
  padding: 0rpx 46rpx;
}
.center {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.tips {
  height: 60rpx;
  opacity: 1;
  background: rgba(110, 88, 170, 0.3);
  /** 文本1 */
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(110, 88, 170, 1);
}
.title {
  /** 文本1 */
  font-size: 48rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 64rpx;
  color: rgba(255, 255, 255, 1);
  padding-top: 236rpx;
  padding-left: 42rpx;
  padding-right: 42rpx;
}
</style>
